﻿<!Doctype html>
<html xmlns="http://www.w3.org/1999/html">
<!---------------------------------------------------------
Auther:：Fin;  Version：Autotestplat-V2.7
----------------------------------------------------------->
<head>
    <meta charset="UTF-8">
    <title> 接口用例 </title>
    <script type="text/javascript" charset="gbk" src="/static/js/fileinput.min.js"></script>
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/public.js"></script>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/fileinput.min.css">
    <link rel="stylesheet" href="/static/css/style.css" type="text/css">
    <link href="/static/css/navbar.css" rel="stylesheet" type="text/css">
    <script>
         window.onload = function(){
            if(loginVerify() == 200){
            };
            var selectElement = document.getElementById('select-option');
            var options = selectElement.options;
            for (var i = 0; i < options.length; i++) {
                if (options[i].text === "{{ product_name }}") {
                    options[i].style.display = 'none';
                    break;
                }
            }
        }
    </script>

</head>
<body>
    <div class="row" >
        <div class="col-sm">
            <ul class="nav nav-pills nav-pills-success nav-pills-square nav-light bg-white pa-15 fixed-top">
                <li class="nav-item">
                    <a class="nav-link" href={% url 'index' %}>首 页</a>
                </li>
                <li class="nav-item">
                    <a href={% url 'product' %} class="nav-link"> 产品管理 </a>
                </li>
                <li class="nav-item">
                    <a href={% url 'apitestcase' %} class="nav-link active"> 接口用例 </a>
                </li>
                <li class="nav-item">
                    <a href={% url 'apitestplan' %} class="nav-link"> 测试计划 </a>
                </li>
                <li class="nav-item">
                    <a href={% url 'apireport' %} class="nav-link"> 测试报告 </a>
                </li>
                <li class="nav-item">
                    <a href={% url 'parasettings' %} class="nav-link"> 系统设置 </a>
                </li>
                <li class="nav-item">
                    <a href={% url 'user' %} class="nav-link "> 用户管理 </a>
                </li>
                <li class="nav-item">
                    <a href={% url 'apiperformance' %} class="nav-link"> 性能测试 </a>
                </li>
                <li class="nav-item dropdown" id="uiDropdown">
                <a id="uitest" class="nav-link"> UI测试 </a>
                <ul class="dropdown-menu" id="uiDropdownMenu">
                    <li><a href={% url 'apptestcase' %} class="nav-link"> AppUI测试 </a></li>
                    <li><a href={% url 'webtestcase' %} class="nav-link"> WebUI测试 </a></li>
                </ul>
                </li>
                <li class="nav-item" id="cur_product" style="margin-left: 150px">
                    <select id="select-option" name="setInput"  onchange="saveOption()" style="height: 40px;font-size: 12px; border: none;color: inherit">
                        <option style="font-size: 12px">{{ product_name }}</option>
                        {% for product in product_alls %}
                        <option style="font-size: 12px">
                        {% if product.product_name == product_name %}
                            {{ product.product_name }} ✓
                        {% else %}
                            {{ product.product_name }}
                       {% endif %}
                       </option>
                       {% endfor %}
                    </select>
                </li>
                <li class="nav-item" id="navUser">
                    <a href="#" class="nav-link" id="userName"></a>
                </li>
                <li class="nav-item" id="logout">
                    <button class="btn btn-danger" onclick="logout()" style="font-size: 13px">退 出</button>
                </li>
            </ul>
        </div>
    </div>

    <div id="outterDiv" class="hk-wrapper screenHeight">
        <div class="container" style="padding: 13px 20px; max-width: 1800px;">
        <div class="row">
        <div class="col-md-12">
            <div class="panel panel-primary">
                <div class="panel-body">
                    <div class="form-group">
                        <div class="row">
                                <form method="get" action="/autotest/apitestcase/search/">
                                <div class="col-md-4">
                                    <div class="input-group">
                                        <span class="input-group-addon">接口名称</span>
                                        <input type="text" class="form-control" id="key_words_name" name="key_words_name" autocomplete="off">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="input-group">
                                        <span class="input-group-addon">URL</span>
                                        <input type="text" class="form-control" id="key_words_url" name="key_words_url" autocomplete="off">
                                    </div>
                                </div>
                                <div class="col-md-1">
                                    <button id="search_button" class="btn btn-primary" style="margin-left: 28%"  type="submit">查询</button>
                                </div>
                                <div class="col-md-1">
                                    <button class="btn btn-primary" style="margin-left: 0px" type="button"  data-toggle="modal" data-target="" onclick="show_add_window('this')" style="margin-left: 0px">添加</button>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table id="blocks" class="table table-hover">
                            <thead>
                            <tr>
                                <th style="text-align: left;display: none"><input type="checkbox" id="checkrev"></th>
                                <th style="text-align: left;">ID</th>
                                <th style="text-align: left;">接口名称</th>
                                <th style="text-align: left;">请求方式</th>
                                <th style="text-align: left;">接口URL</th>
                                <th style="text-align: left;">产品</th>
                                <th style="text-align: left;">创建人</th>
                                <th style="text-align: left;">操作</th>
                            </tr>
                            </thead>
                            <tbody id="tbody">
                            {% for rec in page_list %}
                                <tr>
                                    <td style="width: 30px;text-align: left;display: none"><input type="checkbox" name="check1" value="{{ forloop.counter }}"></td>
                                    <td style="width: 20px;text-align: left;" id="ids">{{ rec.id }}</td>
                                    <td style="max-width: 130px;font-size: 12px;white-space: nowrap;overflow: hidden;">{{ rec.name }}</td>
                                    <td style="max-width: 50px;white-space: nowrap;overflow: hidden;font-size: 12px">{{ rec.mode }}</td>
                                    <td style="max-width: 130px;white-space: nowrap;overflow: hidden;font-size: 12px">{{ rec.url }}</td>
                                    <td style="width:100px;text-align: left;font-size: 12px">{{ rec.product_id }}</td>
                                    <td style="width:60px;text-align: left;font-size: 12px">{{ rec.charger }}</td>
                                    <td id="operations" style="width: 170px;text-align: center;">
                                        <div class="btn-group btn-group-xs" style="margin-left: -15px;">
                                            <button type="button" class="btn btn-primary" data-toggle="modal"
                                                    data-target="" data-whatever="{{ rec.name }}" style="font-size: 12px"
                                                    onclick="show_edit_interface(this,'{{ rec.id }}','edit')">编辑
                                            </button>
                                            <button type="button" class="btn btn-blue" style="margin-left: 5px;font-size: 12px" data-toggle="modal"
                                                    data-target="" data-whatever="{{ rec.name }}"
                                                    onclick="show_copy_interface(this,'{{ rec.id }}','copy')">复制
                                            </button>
                                            <button type="button" class="btn btn-danger" style="margin-left: 5px;font-size: 12px" data-toggle="modal"
                                                    data-target="#del_window" data-whatever="{{ rec.id }}_{{ rec.name }}">删除
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <div class="container" style="margin-left: 350px">
                        <ul class="pagination" id="pager">
                            {% if page_list.has_previous %}
                                <li class="current"><a href="?page=1">首页</a></li>
                                <li class="previous"><a href="?page={{ page_list.previous_page_number }}">上一页</a></li>
                            {% else %}
                                <li class="previous disabled"><a href="#">上一页</a></li>
                            {% endif %}
                            {% if page_list.has_next %}
                                <li class="next"><a href="?page={{ page_list.next_page_number }}">下一页</a></li>
                                <li class="current"><a href="?page={{  page_list.paginator.num_pages }}">尾页</a></li>
                            {% else %}
                                <li class="next disabled"><a href="#">下一页</a></li>
                            {% endif %}
                            <input type="text" class="form-control" id="page-input" name="page-input" placeholder="输入页码" autocomplete="off" style="display: inline-block;width: 90px">
                            <a href="#" class="#" onclick="jumpToPage()"><span class="badge badge-primary " style="width: 60px;height:30px;font-size: 16px">跳转</span></a>
                            <li><span class="current">第 {{ page_list.number }} / {{ page_list.paginator.num_pages }}页</span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="add_window" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document" style="width: 1112px;margin-left: 70px">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">添加接口</h4>
                </div>
                <div class="modal-body">
                    <iframe id="frame_add_window" class="frame_add_window" name='frame_add_window' src="" width="100%" height="640px" allowTransparency="true" style="background-color:transparent;border: 0;"></iframe>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="edit_window" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document" style="width: 1112px;margin-left: 70px">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">编辑接口</h4>
                </div>
                <div class="modal-body">
                    <iframe id="frame_edit_window" class="frame_edit_window" name='frame_edit_window' src="" width="100%" height="650px" allowTransparency="true" style="background-color:transparent;border: 0;"></iframe>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="copy_window" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document" style="width: 1112px;margin-left: 70px">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">复制接口</h4>
                </div>
                <div class="modal-body">
                    <iframe id="frame_copy_window" class="frame_copy_window" name='frame_copy_window' src="" width="100%" height="650px" allowTransparency="true" style="background-color:transparent;border: 0;"></iframe>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="del_window" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <h1 class="modal-title" style="font-size: 20px;color:green;"></h1>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" href="javascript:void(0)"
                            onclick="del_interfaces(this)">确定
                    </button>
                </div>
            </div>
        </div>
    </div>

<script type="text/javascript">
    function show_public_para(ele) {
        var frameSrc = "/show_public_para/";
        $("#frame_public_window").attr("src", frameSrc);
        $('#public_para').modal();
    }

    function show_sign_role(ele) {
        var frameSrc = "/show_sign_role/";
        $("#frame_sign_window").attr("src", frameSrc);
        $('#sign_role').modal();
    }

    function show_add_window() {
        var frameSrc = "/autotest/apitestcase/show_add_window/";
        $("#frame_add_window").attr("src", frameSrc);
        $('#add_window').modal()
    }

    function show_edit_interface(ele,id,action) {
        var frameSrc = "/autotest/apitestcase/show_edit_interface/"+id+"/"+action+"/";
        $("#frame_edit_window").attr("src", frameSrc);
        $('#edit_window').modal();
    }

    function show_copy_interface(ele,id,action) {
        var frameSrc = "/autotest/apitestcase/show_edit_interface/"+id+"/"+action+"/";
        $("#frame_copy_window").attr("src", frameSrc);
        $('#copy_window').modal();
    }

    function show_assert(ele,edit_id) {
        var frameSrc = "/autotest/show_assert/" + edit_id + "/";
        $("#frame_assert_window").attr("src", frameSrc);
        $('#assert_window').modal();
    }

    $('#del_window').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var recipient = button.data('whatever');
        console.log(recipient);
        var modal = $(this);
        modal.find('.modal-title').text('即将删除接口： ' + recipient);
        modal.find('.modal-body input').val(recipient)
    });

    function del_interfaces(ele) {
        var id_interface = $('#del_window').find('.modal-title')[0].textContent;
        var id_tmp = id_interface.split("_")[0];
        var id1 = id_tmp.split("：")[1];
        console.log(id1);
        $.ajax({
            url: "/autotest/apitestcase/del/",
            data: JSON.stringify({
                id1: id1,
                csrfmiddlewaretoken: '{{ csrf_token }}'
            }),
            headers:{'X-CSRFToken': '{{ csrf_token }}'},
            contentType: 'application/json;charset=utf-8',
            type: "POST",
            traditional: true,
            success: function (result) {
                window.location.reload(true);
                console.log(result);
            },
            fail: function (result) {
                debugger
            }
        });
    }

    function show_request_data(ele) {
        $('.textarea').empty();
        var id1 = $(ele).parent().parent().parent().find('td')[1].textContent;
        var name1 = $(ele).parent().parent().parent().find('td')[2].textContent;
        console.log(id1);
        $.ajax({
            url: "/apitestcase/show_request_data/",
            data: JSON.stringify({
                id1: id1,
                csrfmiddlewaretoken: '{{ csrf_token }}'
            }),
            headers:{'X-CSRFToken': '{{ csrf_token }}'},
            contentType: 'application/json',
            type: "POST",
            traditional: true,
            success: function (result) {
                $('.textarea').append(result);
                console.log(result);
            },
            fail: function (result) {
            }
        });
    }
</script>

</body>
</html>